<template>
    <div class="size-full flex-center flex-col justify-around">
        <div class="flex-center flex-col">
            <h1 class="text-4xl mb-4 text-teal animated animated-flip-in-x">
                Learn English
            </h1>
            <span class="text-gray-3"
                >{{
                    wordStore.words.length - wordStore.unlearnedWords.length
                }}
                / {{ wordStore.words.length }}</span
            >
        </div>

        <span
            class="p2 text-3xl cursor-pointer transition text-orange animated animated-pulse animated-repeat-infinite"
            @click="$router.push('learn')"
            >Start</span
        >
    </div>
</template>

<script setup lang="ts">
    import { useWordStore } from "../store"

    const wordStore = useWordStore()
</script>
